<template>
  <div class="dynamicLoadData" v-html="props.dynamicData">

  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
  dynamicData: {
    type: String
  },
  loading: {
    type: Boolean
  }
})
const scroller = ref<any>(null)
function scrollToTop() {
  scroller.value.scrollToItem(0)
}
function scrollToBottom() {
  scroller.value.scrollToBottom()
}
// function onUpdate(viewStartIndex, viewEndIndex, visibleStartIndex, visibleEndIndex) {
//   // console.log(viewStartIndex, viewEndIndex, visibleStartIndex, visibleEndIndex)
// }
function scrollStart() {
  // console.log('看到开始')
}
function scrollEnd() {
  // console.log('看到结束')
}
</script>

<style lang="scss" scoped>
.dynamicLoadData {
  position: relative;
  // height: 100%;
  background: #161821;
  line-height: 1.5;
  padding: 10px;
  color:white;

  .records_ul {
    height: 100%;
    color: #fff;
    padding: 8px 0;

    .records_li {
      font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
      font-size: 12px;

      .CheckStep-line {
        color: #d0d7de;
        padding: 2px 0;

        .CheckStep-line-number {
          width: 48px;
          overflow: hidden;
          color: rgba(140, 149, 159, 0.75);
          text-align: right;
          text-decoration: none;
          text-overflow: ellipsis;
          white-space: nowrap;
          -webkit-user-select: none;
          user-select: none;
          cursor: default;
        }

        .CheckStep-line-content {
          word-break: break-all;
          padding: 0 16px 0 16px;

          span {
            display: block;
            //white-space: pre-wrap;
            white-space: break-spaces;
          }
        }

        .d-inline-block {
          display: inline-block;
        }

        .flex-auto {
          flex: auto;
        }

        .flex-shrink-0 {
          flex-shrink: 0;
        }

        &:hover {
          color: #f6f8fa;
          background-color: rgba(255, 255, 255, 0.125);
        }
      }

      .d-flex {
        display: flex;
      }
    }
  }

  .build-loader-animation {
    width: 100%;
    height: 22px;
    margin: 10px 0 0 0;
    padding: 0 18px;

    span {
      margin-right: 10px;
    }

    i {
      font-size: 12px;
      font-weight: 900;
      color: #fff;
    }

    .loader-animation .dot {
      display: inline-block;
      width: 6px;
      height: 6px;
      margin: auto auto 12px;
      border-radius: 50%;
      animation: blinking-dot 1s linear infinite;
      background: #fff;
    }

    .loader-animation .dot:nth-child(2) {
      animation-delay: 0.33s
    }

    .loader-animation .dot:nth-child(3) {
      animation-delay: 0.66s
    }

    @keyframes blinking-dot {
      0% {
        opacity: 1
      }

      25% {
        opacity: 0.4
      }

      75% {
        opacity: 0.4
      }

      100% {
        opacity: 1
      }
    }
  }

  .animation-bottom {
    bottom: 0;
  }
}
</style>
